import { Button, Typography } from 'antd'
import { useReducer } from 'react'

const initState = { count: 0 }
// 相当于 useState 加大版，用于处理更庞大且复杂的数据
const reducer = (state = initState, action: any) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count + -1 }
    default:
      return state
  }
}

const UseReducerComponent = () => {
  const [state, dispatch] = useReducer(reducer, initState)
  return (
    <Typography>
      <Typography.Text>{state.count}</Typography.Text>
      <Button onClick={() => dispatch({ type: 'increment' })}>+</Button>
      <Button onClick={() => dispatch({ type: 'decrement' })}>-</Button>
    </Typography>
  )
}

export default UseReducerComponent
